<template>
    <section class="wrapper">
      <myHeader class="header" :obj="myObj" @events="events"></myHeader>
      <main>
        <mt-navbar v-model="selected" class="myNavbar">
          <mt-tab-item id="1" class="myNav2">待评论</mt-tab-item>
          <mt-tab-item id="2" class="myNav2">已评价</mt-tab-item>
        </mt-navbar>
        <mt-tab-container class="container" v-model="selected">
          <mt-tab-container-item class="item item_0308"  id="1">
            <!-- 附近的 -->
            <div class="wrapT_01" @scroll="conwrap()">
              <section class="paddingT_10" v-for="item in datalist" @click="toindent(item.PostMesssageDetailId)" >
                <div class="orderItem">
                  <div class="faceWrap">
                    <i :style="{background:'url('+ item.HeadUrl + ') no-repeat center center', backgroundSize:'cover'}"></i>
                    <p>{{item.Name}}</p>
                  </div>
                  <div class="infoWrap">
                    <h2>{{item.Title}}</h2>
                    <h5 v-if="item.Describe">{{item.Describe}}</h5>
                    <div class="fontWrap">
                      <span>购买时间：{{item.BuyTime.slice(0,10)}}</span>
                      <span>购买金额：￥{{item.Money.toFixed(2)}}</span>
                    </div>
                  </div>
                </div>
              </section>
            </div>
            <!-- 附近的 -->
          </mt-tab-container-item>
           <mt-tab-container-item class="item item_0308"  id="2">
            <!-- 附近的 -->
            <div class="wrapT_02" @scroll="conwrap()">
              <section class="paddingT_10" v-for="(item,key) in datalist" @click="showBuyVoice(key)" >
                <div class="orderItem">
                  <div class="faceWrap">
                    <i :style="{background:'url('+ item.HeadUrl + ') no-repeat center center', backgroundSize:'cover'}"></i>
                    <p>{{item.Name}}</p>
                  </div>
                  <div class="infoWrap">
                    <h2>{{item.Title}}</h2>
                    <h5 v-if="item.Describe">{{item.Describe}}</h5>
                    <div class="fontWrap">
                      <span>购买时间：{{item.BuyTime.slice(0,10)}}</span>
                      <span>购买金额：￥{{item.Money.toFixed(2)}}</span>
                    </div>
                  </div>
                </div>
              </section>
            </div>
            <!-- 附近的 -->
          </mt-tab-container-item>
        </mt-tab-container>
        <transition name="fade">
          <div class="voice-box" v-if="boxShow">
              <voice-theme :index="currentIndex" :praiseShow="false"></voice-theme>
          </div>
        </transition>
      </main>
    </section>
</template>
<script>
import myHeader from './base/myHeader';
import myOrder from './base/myOrder';
import Client from '../assets/js/common';
import voiceTheme from './voice';
import hgjSkip from '../assets/js/hgjSkip';
import API from '../assets/js/asktoses';
import { fetch } from '../assets/api';
export default {
  data () {
    return {
      myObj: {
        type: 3,
        text: '购买的内容'
      },
      selected: this.$route.query.index,
      datalist:[],
      loginData:null,
      page:"",
      currentIndex:0,
      boxShow:false,
      bol:false,
      allListData:{},
      num:0
    }
  },
  created() {
    hgjSkip.skip().then(res =>{
      this.loginData = res;
      if(!this.selected){
        this.selected = "1";
      }else{
        switch(this.selected){
          case '2':
            this.buyData();
            break;
          default:
            this.buyData();
            break;
        }
      };
    });
    /*let uuus = [{OpenId:"004ca6fd038949058ace7d22d62d37be"},{Sig:"eJxlz0FPgzAUwPE7n6LpVePaQoWZ7NAIOqYMGOjGiZDSbc0YMOjYFuN3V1Ejie-6*7*8vDcNAADj5*gm47w6lipVl1pAcAcggtd-WNcyTzOV6k3*D8W5lo1Is7USTY*YUkoQGjYyF6WSa-lbIESwSQdBm*-S-sq3G5-rhomJMUzkpkfPCe9de2GNRns-XEbUP7LiJTT1V3ZaJcT13PFjN18Gjr2xi21lrZhk3oUW6ImRmOBpO0tOMQqCGVdTe-fAneyQdPMtP0QLv70KJ5PBSSX34uclomOT3I6tgXaiaWVV9gFBmGKio6*B2rv2AQnmWxQ_",OpenId:"004ca6fd038949058ace7d22d62d37be"},{channelcode:"7dc26571d9ff4",Sig:"eJxlz0FPgzAUwPE7n6LpVePaQoWZ7NAIOqYMGOjGiZDSbc0YMOjYFuN3V1Ejie-6*7*8vDcNAADj5*gm47w6lipVl1pAcAcggtd-WNcyTzOV6k3*D8W5lo1Is7USTY*YUkoQGjYyF6WSa-lbIESwSQdBm*-S-sq3G5-rhomJMUzkpkfPCe9de2GNRns-XEbUP7LiJTT1V3ZaJcT13PFjN18Gjr2xi21lrZhk3oUW6ImRmOBpO0tOMQqCGVdTe-fAneyQdPMtP0QLv70KJ5PBSSX34uclomOT3I6tgXaiaWVV9gFBmGKio6*B2rv2AQnmWxQ_",OpenId:"004ca6fd038949058ace7d22d62d37be"}]
    Client.setStore('login',uuus);
    return;*/
  },
  methods: {
    events(i){
      if(i ==2) {
        history.back();
      }
    },
    conwrap() {
      let tagList = document.querySelector('.wrapT_0'+this.selected);
      let tagHeight = tagList.scrollHeight - tagList.clientHeight - 20;
      let tagScroll = tagList.scrollTop;
      if(tagHeight <= tagScroll && this.bol) {
        this.bol = false;
        this.buyData(this.selected)
      }
    },
    toindent(tOrderNo){
      this.$router.push({path:"/evaluate",query:{PostMesssageDetailId:tOrderNo}});
    },
    async buyData(){
      if(this.selected == 2) {
        this.page = true;
      } else {
        this.page = false;
      }
      this.num++;
      const res = await fetch(API.getmyPurchase,{
        ...this.loginData[1],
        IsComment:this.page,
        PageIndex:this.num
      });
      this.commitData = res.Result;
      this.allListData = res.Result.MessageDetails;
      this.allListData.forEach(item => {
        this.datalist.push(item)
      });
      if(this.allListData.length == 10){
        this.bol = true;
      } else {
        this.bol = false;
      }
    },
    showBuyVoice(keys) {
      this.currentIndex = keys;
      this.$store.commit('detailDatas', this.commitData);
      this.$store.commit('boxShow', true);
    }
  },
  watch:{
    selected(val) {
      this.num = 0;
      this.datalist.length = 0;
      this.buyData()
      this.$router.replace({path:"/buyContent",query:{index:val}})
    },
    '$store.state.boxShow':function(val){
      this.boxShow = val;
    }
  },
  components: {
    myHeader,
    myOrder,
    voiceTheme
  }
}

</script>
<style lang="less">
.wrapper {
  width: 3.75rem;
  height: 100%;
  main {
    width: 3.75rem;
    height: 100%;
    padding-top: .44rem;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: auto;
    box-sizing: border-box;
    .container {
      padding-top: 1rem;
      height: 100%;
      width: 3.75rem;
      position: absolute;
      top: 0;
      box-sizing: border-box;
      >div {
        height: 100%;
      }
      .item {
        padding-top: 1rem;
        height: 100%;
        width: 3.75rem;
        position: absolute;
        top: 0;
        box-sizing: border-box;
        .paddingT_10 {
          padding-top: .1rem;
          .orderItem{
            width: 3.35rem;
            background: white;
            border-radius: .04rem;
            margin: 0 auto;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: .1rem;
            .faceWrap{
              i{
                display: block;
                height: .6rem;
                width: .6rem;
                border-radius: 50%;
              }
              p{
                text-align: center;
                font-size: .12rem;
                color: #333;
                margin-top: .05rem;
              }
            }
            .infoWrap{
              padding-left: .1rem;
              padding-top: .1rem;
              h2{
                color: #333;
                font-size: .14rem;
                font-weight: normal;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp:1;
                overflow: hidden;
              }
              h5{
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp:1;
                overflow: hidden;
                margin: 0.1rem 0 0;
                font-size: .12rem;
                color: #B3B3B6;
                font-weight: normal;
              }
              .fontWrap{
                margin-top: .1rem;
                span{
                  font-size: .12rem;
                  color: #B3B3B6;
                  &:nth-of-type(2){
                    margin-left: .2rem;
                  }
                }
              }
            }
          }
        }
      }
      .item_0308 {
        overflow-y: auto;
      }
    }
  .voice-box{
      height:100%;
      position: absolute;
      top:0;
      left:0;
      z-index:20;
      &.move-enter-active, &.move-leave-active{
        transition: opacity .5s;
      }
      &.fade-enter, .fade-leave-to{
        opacity: 0
      }
    }
  }
}
  
</style>
<style>
   .myNavbar {
    display: block;
    justify-content: space-around;
    overflow: hidden;
    padding: 0 .15rem;
    box-sizing: border-box;
    background: #FAFAFA;
    position: relative;
    z-index: 2;
  }
  .mint-navbar .myNav2 {
    display: block;
    width: .85rem;
    float: left;
    margin: 0 .4rem;
  }
  .mint-navbar .is-selected {
    border-bottom: 3px solid #557AFF!important;
  }
  .mint-navbar .myNav2 .mint-tab-item-label {
    font-size: .14rem;
  }
  .mint-navbar .is-selected .mint-tab-item-label {
    color: #557AFF;
    font-weight: 600;
    font-size: .14rem;
  }
</style>
